<template>
    <div>
        <div style="display: flex; justify-content: flex-end">
            <el-tooltip effect="dark" content="上组数据" placement="top-start">
                <el-button
                    icon="el-icon-caret-left"
                    size="mini"
                    style="font-size: 20px"
                    :disabled="leftDisable"
                    @click="pre()"
                ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="下组数据" placement="top-start">
                <el-button
                    icon="el-icon-caret-right"
                    style="font-size: 20px"
                    :disabled="rightDisable"
                    @click="next()"
                ></el-button>
            </el-tooltip>
        </div>
        <div id="echarFour" ref="echarFour"></div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "echarFour",
    created() {},
    mounted() {
        this.initCharts();
    },
    data() {
        return {
            echarFour: null, //图表
            leftDisable: true, //左边按钮开启
            rightDisable: false, //右边按钮开启
            count: 1, //右键点击次数
            cageXData: [], //X轴数据
            singleEggData: [], //单蛋数据
            unfertilizedData: [], //未受精蛋数据
            damagedData: [], //踩蛋数据
            badData: [], //坏蛋数据
            totalAbnormal: [], //总异常数据
            option: {
                //配置项
                title: {
                    text: "近一个月鸽笼异常情况排行",
                    left: "center",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["异常总次数", "单蛋", "未受精蛋", "踩蛋", "坏蛋"],
                    right: 15,
                    top: 30,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: "",
                    axisLabel: {
                        interval: 0, //强制文字产生间隔
                        rotate: 50, //文字逆时针旋转35°
                        textStyle: {
                            //文字样式
                            color: "black",
                            fontSize: 10,
                        },
                    },
                },
                yAxis: {
                    name: "数量/个(天)",
                    type: "value",
                },
                series: [
                    {
                        name: "异常总次数",
                        type: "line",
                        stack: "Total",
                        data: "",
                    },
                    {
                        name: "单蛋",
                        type: "line",
                        stack: "Total",
                        data: "",
                    },
                    {
                        name: "未受精蛋",
                        type: "line",
                        stack: "Total",
                        data: "",
                    },
                    {
                        name: "踩蛋",
                        type: "line",
                        stack: "Total",
                        data: "",
                    },
                    {
                        name: "坏蛋",
                        type: "line",
                        stack: "Total",
                        data: "",
                    },
                ],
            },
        };
    },
    watch: {
        abnormalData: {
            deep: true,
            // immediate: true,
            handler(newValue, oldValue) {
                // console.log("异常数据发生改变");
                // console.log(newValue);
                this.initData();
                this.processData();
                this.echarFour.setOption(this.option);
            },
        },
        noData: {
            handler(newValue, oldValue) {
                if (newValue) {
                    // console.log('没有更多异常排行数据了!')
                    this.rightDisable = true;
                    this.count--; //最后一次点击无效
                    // this.$message({
                    //     message: "没有更多异常排行数据了!",
                    //     type: "warning",
                    // });

                    if (this.count === 1) {
                        //第一页的数据就是完整的数据，则两个按钮都要禁
                        this.leftDisable = true;
                        this.rightDisable = true;
                    }
                }
            },
        },
    },
    props: {
        abnormalData: {
            type: Array,
            default: function () {
                return [];
            },
        },
        noData: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState({
            baseInfo: (state) =>
                //基地信息
                state.Usersetting.BaseInfo,
            allDovecoteInfo: (state) =>
                //基地所有鸽棚信息
                state.Usersetting.AllDovecoteInfo,
            currentDovecote: (state) =>
                //当前鸽棚信息
                state.Usersetting.CurrentDovecote,
        }),
    },
    methods: {
        //初始化图表
        initCharts() {
            let that = this;
            that.$nextTick(() => {
                that.echarFour = that.$echarts.init(that.$refs.echarFour);
                that.processData();
                that.echarFour.setOption(this.option);
            });
        },

        //数据处理
        processData() {
            let that = this;
            console.log("数据处理");
            console.log(that.abnormalData);
            if (that.abnormalData.length < 10) {
                that.rightDisable = true; //禁用切换至下组数据的按钮
            }

            that.abnormalData.forEach((item, index) => {
                //异常数据处理
                let tempUnfertilized =
                    item.oneUnfertilized + item.twoUnfertilized * 2;
                let tempDamaged = item.oneDamaged + item.twoDamaged * 2;
                let tempBad = item.oneBad + item.twoBad * 2;

                that.singleEggData.push(item.singleEgg); //单蛋数据
                that.unfertilizedData.push(tempUnfertilized); //未受精蛋数据
                that.damagedData.push(tempDamaged); //踩蛋数据
                that.badData.push(tempBad); //坏蛋数据
                that.totalAbnormal.push(item.totalAbnormal); //异常次数数据
                that.cageXData.push(item.position); //X轴数据
            });

            // console.log("最最终数据");
            // console.log(that.cageXData);
            // console.log(that.singleEggData);
            // console.log(that.unfertilizedData);
            // console.log(that.damagedData);
            // console.log(that.badData);
            // console.log(that.totalAbnormal);
            that.option.xAxis.data = that.cageXData;
            that.option.series[0].data = that.totalAbnormal;
            that.option.series[1].data = that.singleEggData;
            that.option.series[2].data = that.unfertilizedData;
            that.option.series[3].data = that.damagedData;
            that.option.series[4].data = that.badData;
            // console.log("option的数据");
            // console.log(that.option);
        },

        //初始化数据
        initData() {
            let that = this;
            that.cageXData = [];
            that.singleEggData = [];
            that.unfertilizedData = [];
            that.damagedData = [];
            that.badData = [];
            that.totalAbnormal = [];
        },

        //获取上一组数据
        pre() {
            let that = this;
            that.$emit("pre"); //图表数据处理在watch里
            that.count--;
            that.rightDisable = false;
            if (that.count === 0) {
                //当回退到第一页时，左键不可用
                that.leftDisable = true;
            }
        },

        //获取下一组数据
        next() {
            let that = this;
            that.$emit("next"); //图表数据处理在watch里
            that.leftDisable = false;
            that.count++;
        },
    },
};
</script>
<style lang="scss" scoped>
#echarFour {
    width: 580px;
    height: 450px;
}
</style>